<template>
	<view class="attendance-container">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="date-control">
				<view class="date-btn" @click="changeDate(-1)">
					<uni-icons type="left" size="24" color="#1890ff"></uni-icons>
				</view>
				<view class="current-date" @click="showCalendar">
					<text>{{ formattedDate }}</text>
					<uni-icons type="calendar" size="24" color="#1890ff"></uni-icons>
				</view>
				<view class="date-btn" @click="changeDate(1)">
					<uni-icons type="arrowright" size="24" color="#1890ff"></uni-icons>
				</view>
			</view>
			<view class="nav-actions">
				<uni-icons type="search" size="24" color="#333" @click="showSearch = true"></uni-icons>
				<uni-icons :type="displayMode === 'list' ? 'grid' : 'list'" size="24" color="#333"
					@click="toggleDisplayMode" style="margin-left: 20rpx"></uni-icons>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-container" v-if="showSearch">
			<uni-icons type="search" size="20" color="#999" class="search-icon"></uni-icons>
			<input class="search-input" placeholder="搜索学生姓名或学号" v-model="searchText" @input="handleSearch" />
			<uni-icons type="close" size="20" color="#999" class="close-icon" @click="clearSearch" />
		</view>

		<!-- 统计卡片 -->
		<view class="stats-cards">
			<view class="stat-card" @click="filterByStatus('all')" :class="{active: filterStatus === 'all'}">
				<text class="stat-number">{{ students.length }}</text>
				<text class="stat-label">全部学生</text>
				<view class="stat-wave" v-if="filterStatus === 'all'"></view>
			</view>
			<view class="stat-card" @click="filterByStatus('present')" :class="{active: filterStatus === 'present'}">
				<text class="stat-number">{{ presentCount }}</text>
				<text class="stat-label">已出勤</text>
				<view class="stat-wave" v-if="filterStatus === 'present'"></view>
			</view>
			<view class="stat-card" @click="filterByStatus('observe')" :class="{active: filterStatus === 'observe'}">
				<text class="stat-number">{{ observeCount }}</text>
				<text class="stat-label">见习</text>
				<view class="stat-wave" v-if="filterStatus === 'observe'"></view>
			</view>
			<view class="stat-card" @click="filterByStatus('absent')" :class="{active: filterStatus === 'absent'}">
				<text class="stat-number">{{ absentCount }}</text>
				<text class="stat-label">请假</text>
				<view class="stat-wave" v-if="filterStatus === 'absent'"></view>
			</view>
			<view class="stat-card" @click="filterByStatus('none')" :class="{active: filterStatus === 'none'}">
				<text class="stat-number">{{ noneCount }}</text>
				<text class="stat-label">未记录</text>
				<view class="stat-wave" v-if="filterStatus === 'none'"></view>
			</view>
		</view>

		<!-- 重新设计的工具栏 -->
		<view class="selection-toolbar" :class="{active: selectedStudents.length > 0}">
			<view class="toolbar-content">
				<view class="selection-info">
					<text class="selection-count">{{ selectedStudents.length }}</text>
					<text class="selection-text">人已选择</text>
				</view>

				<view class="tool-actions">
					<view class="tool-btn select-all" @click="selectAll" :class="{disabled: !canSelectAll}">
						<uni-icons type="checkbox-filled" size="24"
							:color="canSelectAll ? '#1890ff' : '#ccc'"></uni-icons>
						<text>全选</text>
					</view>

					<view class="divider"></view>

					<view class="tool-btn clear-selection" @click="clearSelection">
						<uni-icons type="trash" size="24" color="#666"></uni-icons>
						<text>清空</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 学生列表 - 列表模式 -->
		<scroll-view class="student-list list-mode" scroll-y :scroll-top="scrollTop" @scroll="onScroll"
			v-if="displayMode === 'list'">
			<view v-for="(student, index) in filteredStudents" :key="student.id" class="student-card" :class="{
          selected: isSelected(student.id),
          present: student.status === 'present',
          observe: student.status === 'observe',
          absent: student.status === 'absent',
          disabled: student.status && !isSelected(student.id)
        }" @click="toggleSelect(student.id)">
				<view class="student-selector">
					<view class="selector-circle"
						:class="{selected: isSelected(student.id), disabled: student.status && !isSelected(student.id)}">
						<uni-icons v-if="isSelected(student.id)" type="checkmark" size="20" color="#fff"></uni-icons>
						<uni-icons v-else-if="student.status && !isSelected(student.id)" type="lock" size="16"
							color="#ccc"></uni-icons>
					</view>
				</view>

				<view class="student-info">
					<text class="student-name">{{ student.name }}</text>
					<text class="student-id">{{ student.id }}</text>
				</view>

				<view class="student-status">
					<view class="status-badge" :class="student.status || 'none'">
						{{ getStatusText(student.status) }}
					</view>
					<text class="student-score">{{ getScore(student.status) }}分</text>
				</view>
			</view>
		</scroll-view>

		<!-- 学生列表 - 卡片模式 -->
		<scroll-view class="student-grid grid-mode" scroll-y :scroll-top="scrollTop" @scroll="onScroll" v-else>
			<view class="grid-row">
				<view v-for="(student, index) in filteredStudents" :key="student.id" class="student-grid-card" :class="{
            selected: isSelected(student.id),
            present: student.status === 'present',
            observe: student.status === 'observe',
            absent: student.status === 'absent',
            disabled: student.status && !isSelected(student.id)
          }" @click="toggleSelect(student.id)">
					<view class="student-selector">
						<view class="selector-circle"
							:class="{selected: isSelected(student.id), disabled: student.status && !isSelected(student.id)}">
							<uni-icons v-if="isSelected(student.id)" type="checkmark" size="20"
								color="#fff"></uni-icons>
							<uni-icons v-else-if="student.status && !isSelected(student.id)" type="lock" size="16"
								color="#ccc"></uni-icons>
						</view>
					</view>

					<view class="student-info">
						<text class="student-name">{{ student.name }}</text>
						<text class="student-id">{{ student.id }}</text>
					</view>

					<view class="student-status">
						<view class="status-badge" :class="student.status || 'none'">
							{{ getStatusText(student.status) }}
						</view>
						<text class="student-score">{{ getScore(student.status) }}分</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 提交按钮 -->
		<view class="submit-container" :class="{active: hasChanges || selectedStudents.length > 0}">
			<view class="submit-btn" @click="showActionSheet">
				<text>提交记录</text>
				<text class="submit-count">({{ selectedStudents.length }}人已选)</text>
			</view>
		</view>

		<!-- 日历弹窗 -->
		<uni-calendar ref="calendar" :insert="false" :lunar="true" :selected="calendarSelected"
			@change="onCalendarChange" :date="calendarDate" />

		<!-- 庆祝动画组件 -->
		<Celebration :show="showCelebration" message="记录提交成功!" />
	</view>
</template>

<script>
	import Celebration from '@/components/Celebration.vue'

	export default {
		components: {
			Celebration
		},
		data() {
			return {
				currentDate: new Date(),
				grade: '',
				classNum: 1,
				time: 'morning',
				filterStatus: 'all',
				selectedStudents: [],
				scrollTop: 0,
				students: [{
						id: '2025010101',
						name: '张三',
						status: ''
					},
					{
						id: '2025010102',
						name: '李四',
						status: ''
					},
					{
						id: '2025010103',
						name: '王五',
						status: ''
					},
					{
						id: '2025010104',
						name: '赵六',
						status: ''
					},
					{
						id: '2025010105',
						name: '钱七',
						status: ''
					},
					{
						id: '2025010106',
						name: '孙八',
						status: ''
					},
					{
						id: '2025010107',
						name: '周九',
						status: ''
					},
					{
						id: '2025010108',
						name: '吴十',
						status: ''
					},
					{
						id: '2025010109',
						name: '郑十一',
						status: ''
					},
					{
						id: '2025010110',
						name: '王十二',
						status: ''
					},
					{
						id: '2025010111',
						name: '李十三',
						status: ''
					},
					{
						id: '2025010112',
						name: '张十四',
						status: ''
					},
				],
				originalStudents: [],
				calendarSelected: [],
				calendarDate: '',
				showCelebration: false,
				showSearch: false,
				searchText: '',
				backupStudents: [],
				displayMode: 'list' // 'list' 或 'grid'
			}
		},
		computed: {
			formattedDate() {
				const year = this.currentDate.getFullYear()
				const month = this.currentDate.getMonth() + 1
				const day = this.currentDate.getDate()
				const week = ['日', '一', '二', '三', '四', '五', '六'][this.currentDate.getDay()]
				return `${year}年${month}月${day}日星期${week}`
			},
			className() {
				const gradeMap = {
					'grade1': '初一',
					'grade2': '初二',
					'grade3': '初三'
				}
				return `${gradeMap[this.grade]}(${this.classNum})班`
			},
			timeName() {
				return this.time === 'morning' ? '上午' : '下午'
			},
			filteredStudents() {
				if (this.filterStatus === 'all') return this.students
				return this.students.filter(student => student.status === (this.filterStatus === 'none' ? '' : this
					.filterStatus))
			},
			presentCount() {
				return this.students.filter(s => s.status === 'present').length
			},
			observeCount() {
				return this.students.filter(s => s.status === 'observe').length
			},
			absentCount() {
				return this.students.filter(s => s.status === 'absent').length
			},
			noneCount() {
				return this.students.filter(s => !s.status).length
			},
			hasChanges() {
				return this.changedCount > 0
			},
			changedCount() {
				let count = 0
				this.students.forEach((student, index) => {
					if (student.status !== this.originalStudents[index].status) {
						count++
					}
				})
				return count
			},
			canSelectAll() {
				return this.filteredStudents.some(student => !student.status)
			}
		},
		created() {
			this.calendarDate = this.formatDateForCalendar(this.currentDate)
			this.originalStudents = JSON.parse(JSON.stringify(this.students))
			this.backupStudents = JSON.parse(JSON.stringify(this.students))

			// 根据屏幕宽度自动选择展示模式
			this.autoSelectDisplayMode()
		},
		methods: {
			formatDateForCalendar(date) {
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			changeDate(days) {
				const newDate = new Date(this.currentDate)
				newDate.setDate(newDate.getDate() + days)
				this.currentDate = newDate
				this.calendarDate = this.formatDateForCalendar(newDate)
				// 这里应该加载新日期的数据
				// this.loadAttendanceData()
			},
			showCalendar() {
				this.$refs.calendar.open()
			},
			onCalendarChange(e) {
				const date = new Date(e.fulldate)
				this.currentDate = date
				this.calendarDate = e.fulldate
				// 加载选中日期的数据
				// this.loadAttendanceData()
			},
			getStatusText(status) {
				const map = {
					'present': '出勤',
					'observe': '见习',
					'absent': '请假',
					'': '未记录'
				}
				return map[status] || '未记录'
			},
			getScore(status) {
				const scoreMap = {
					'present': 1,
					'observe': 0.6,
					'absent': 0.3,
					'': 0
				}
				return scoreMap[status] || 0
			},
			filterByStatus(status) {
				this.filterStatus = status
				this.scrollTop = 0
			},
			isSelected(id) {
				return this.selectedStudents.includes(id)
			},
			toggleSelect(id) {
				const student = this.students.find(s => s.id === id)
				if (student.status && !this.isSelected(id)) {
					// 已操作的学生不能被选中
					return
				}

				const index = this.selectedStudents.indexOf(id)
				if (index === -1) {
					this.selectedStudents.push(id)
				} else {
					this.selectedStudents.splice(index, 1)
				}
			},
			selectAll() {
				if (!this.canSelectAll) {
					uni.showToast({
						title: '没有可操作的学生',
						icon: 'none'
					})
					return
				}

				this.selectedStudents = this.filteredStudents
					.filter(s => !s.status)
					.map(s => s.id)
			},
			clearSelection() {
				this.selectedStudents = []
			},
			batchSetStatus(status) {
				this.students.forEach(student => {
					if (this.selectedStudents.includes(student.id)) {
						student.status = status === 'none' ? '' : status
					}
				})
				this.selectedStudents = []
			},
			showActionSheet() {
				if (this.selectedStudents.length === 0) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					})
					return
				}

				uni.showActionSheet({
					itemList: ['出勤', '见习', '请假'],
					success: (res) => {
						const statusMap = {
							0: 'present',
							1: 'observe',
							2: 'absent'
						}
						this.batchSetStatus(statusMap[res.tapIndex])
						this.submitAttendance()
					}
				})
			},
			submitAttendance() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				})

				// 模拟提交到服务器
				setTimeout(() => {
					uni.hideLoading()

					// 更新原始数据
					this.originalStudents = JSON.parse(JSON.stringify(this.students))

					// 显示庆祝动画
					this.showCelebration = true
					setTimeout(() => {
						this.showCelebration = false
					}, 3000)
				}, 1000)
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			goBack() {
				if (this.hasChanges) {
					uni.showModal({
						title: '提示',
						content: '您有未保存的更改，确定要离开吗？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					})
				} else {
					uni.navigateBack()
				}
			},
			handleSearch() {
				if (this.searchText.trim() === '') {
					this.students = JSON.parse(JSON.stringify(this.backupStudents))
					return
				}

				const keyword = this.searchText.toLowerCase()
				this.students = this.backupStudents.filter(student =>
					student.name.toLowerCase().includes(keyword) ||
					student.id.toLowerCase().includes(keyword)
				)
			},
			clearSearch() {
				this.searchText = ''
				this.students = JSON.parse(JSON.stringify(this.backupStudents))
				this.showSearch = false
			},
			toggleDisplayMode() {
				this.displayMode = this.displayMode === 'list' ? 'grid' : 'list'
			},
			autoSelectDisplayMode() {
				// 根据屏幕宽度自动选择展示模式
				const systemInfo = uni.getSystemInfoSync()
				this.displayMode = systemInfo.windowWidth > 600 ? 'grid' : 'list'
			}
		}
	}
</script>

<style>
	/* 基础样式 */
	.attendance-container {
		/* background-color: #f8f9fa; */
		min-height: 100vh;
		padding-bottom: 120rpx;
		position: relative;
		overflow: hidden;
		background-image:
			radial-gradient(circle at 10% 20%, rgba(255, 79, 10, 0.4) 0%, transparent 40%),
			radial-gradient(circle at 90% 80%, rgba(38, 10, 255, 0.4) 0%, transparent 40%);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	}

	/* 导航栏 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #ffffffb8;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 10;
	}

	.nav-back,
	.nav-actions {
		width: 80rpx;
		display: flex;
		justify-content: center;
	}

	.date-control {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: center;
	}

	.date-btn {
		padding: 15rpx;
		border-radius: 50%;
		transition: all 0.3s;
	}

	.date-btn:active {
		background-color: rgba(24, 144, 255, 0.1);
	}

	.current-date {
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.current-date text {
		margin-right: 15rpx;
	}

	/* 搜索框 */
	.search-container {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		position: relative;
		z-index: 5;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.search-icon {
		position: absolute;
		left: 40rpx;
	}

	.search-input {
		flex: 1;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		padding: 0 80rpx;
		font-size: 28rpx;
		transition: all 0.3s;
	}

	.search-input:focus {
		background-color: #e6f7ff;
		box-shadow: 0 0 0 2rpx rgba(24, 144, 255, 0.2);
	}

	.close-icon {
		position: absolute;
		right: 40rpx;
	}

	/* 统计卡片 */
	.stats-cards {
		display: flex;
		padding: 20rpx;
		overflow-x: auto;
		white-space: nowrap;
		background-color: #ffffff61;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 5;
		scrollbar-width: none;
		/* Firefox */
	}

	.stats-cards::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.stat-card {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 25rpx 35rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff96;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;
		min-width: 140rpx;
	}

	.stat-card.active {
		background-color: #1890ff;
		box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.3);
	}

	.stat-card.active .stat-number,
	.stat-card.active .stat-label {
		color: #fff;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		position: relative;
		z-index: 2;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
		position: relative;
		z-index: 2;
	}

	.stat-wave {
		position: absolute;
		bottom: -10rpx;
		left: 0;
		right: 0;
		height: 20rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.3) 100%);
		animation: wave 3s infinite linear;
	}

	@keyframes wave {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	/* 重新设计的工具栏 */
	.selection-toolbar {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		height: 0;
		background-color: #ffffff63;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 8;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.selection-toolbar.active {
		height: 120rpx;
		padding: 20rpx;
	}

	.toolbar-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
	}

	.selection-info {
		display: flex;
		align-items: baseline;
	}

	.selection-count {
		font-size: 40rpx;
		font-weight: bold;
		color: #1890ff;
		margin-right: 10rpx;
	}

	.selection-text {
		font-size: 28rpx;
		color: #666;
	}

	.tool-actions {
		display: flex;
		align-items: center;
	}

	.tool-btn {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		border-radius: 40rpx;
		background-color: #f5f5f5;
		margin-left: 15rpx;
		transition: all 0.3s;
	}

	.tool-btn.select-all {
		background-color: #e6f7ff;
	}

	.tool-btn.clear-selection {
		background-color: #f5f5f5;
	}

	.tool-btn.disabled {
		opacity: 0.5;
	}

	.tool-btn text {
		margin-left: 8rpx;
		font-size: 26rpx;
		color: #333;
	}

	.tool-btn.select-all text {
		color: #1890ff;
	}

	.divider {
		width: 1rpx;
		height: 40rpx;
		background-color: #e8e8e8;
		margin: 0 15rpx;
	}

	/* 学生列表 - 列表模式 */
	.student-list.list-mode {
		height: calc(100vh - 480rpx);
		padding: 20rpx;
		/* margin-top: -20rpx; */
		position: relative;
		z-index: 5;
	}

	.student-card {
		display: flex;
		align-items: center;
		padding: 25rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff63;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.student-card.disabled {
		opacity: 0.7;
		background-color: #fafafa;
	}

	.student-card.selected {
		transform: translateX(10rpx);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.student-card.present {
		border-left: 8rpx solid #1890ff;
	}

	.student-card.observe {
		border-left: 8rpx solid #fa8c16;
	}

	.student-card.absent {
		border-left: 8rpx solid #f5222d;
	}

	.student-selector {
		margin-right: 20rpx;
	}

	.selector-circle {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
	}

	.selector-circle.selected {
		border-color: #1890ff;
		background-color: #1890ff;
	}

	.selector-circle.disabled {
		border-color: #eee;
		background-color: #f5f5f5;
	}

	.student-info {
		flex: 1;
	}

	.student-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 5rpx;
	}

	.student-id {
		font-size: 24rpx;
		color: #999;
	}

	.student-status {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.status-badge {
		padding: 6rpx 15rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		margin-bottom: 5rpx;
	}

	.status-badge.present {
		background-color: #e6f7ff;
		color: #1890ff;
		border: 1rpx solid #1890ff;
	}

	.status-badge.observe {
		background-color: #fff7e6;
		color: #fa8c16;
		border: 1rpx solid #fa8c16;
	}

	.status-badge.absent {
		background-color: #fff1f0;
		color: #f5222d;
		border: 1rpx solid #f5222d;
	}

	.status-badge.none {
		background-color: #f5f5f5;
		color: #666;
		border: 1rpx solid #d9d9d9;
	}

	.student-score {
		font-size: 28rpx;
		font-weight: bold;
	}

	.student-card.present .student-score {
		color: #1890ff;
	}

	.student-card.observe .student-score {
		color: #fa8c16;
	}

	.student-card.absent .student-score {
		color: #f5222d;
	}

	/* 学生列表 - 网格模式 */
	.student-grid.grid-mode {
		height: calc(100vh - 480rpx);
		padding: 20rpx;
		margin-top: -20rpx;
		position: relative;
		z-index: 5;
	}

	.grid-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.student-grid-card {
		width: 48%;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.student-grid-card.disabled {
		opacity: 0.7;
		background-color: #fafafa;
	}

	.student-grid-card.selected {
		transform: translateY(-5rpx);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.student-grid-card.present {
		border-top: 8rpx solid #1890ff;
	}

	.student-grid-card.observe {
		border-top: 8rpx solid #fa8c16;
	}

	.student-grid-card.absent {
		border-top: 8rpx solid #f5222d;
	}

	/* 提交按钮 */
	.submit-container {
		position: fixed;
		bottom: -150rpx;
		left: 0;
		right: 0;
		padding: 30rpx;
		/* background-color: #fff; */
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		z-index: 10;
	}

	.submit-container.active {
		bottom: 0;
	}

	.submit-btn {
		background-color: #1890ff;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
		transition: all 0.3s;
	}

	.submit-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 6rpx rgba(24, 144, 255, 0.3);
	}

	.submit-count {
		font-size: 24rpx;
		margin-left: 15rpx;
		opacity: 0.8;
	}

	/* 响应式布局 */
	@media (min-width: 600px) {
		.student-grid-card {
			width: 32%;
		}
	}

	@media (min-width: 768px) {
		.attendance-container {
			/* max-width: 750px; */
			margin: 0 auto;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
		}

		.student-list,
		.student-grid {
			height: calc(100vh - 450px);
		}

		.selection-toolbar.active {
			height: 80px;
			padding: 15px;
		}

		.student-grid-card {
			width: 23%;
		}
	}

	@media (min-width: 1024px) {
		.student-grid-card {
			width: 18%;
		}
	}
</style>